<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
        html, head, body {
            background: #ffffff!important;
        }
        /* 选择全部标签的第一个标签，默认是html */
        :first-child {
            background: #ffff00;
        }
        /* 选择全部元素的最后一个标签, 默认是html */
        :last-child {
            background: #ff0000;
        }
        /* 选择同一种标签的第一个标签 */
        :first-of-type {
            background: #00ff00;
        }
        /* 选择同一种标签的最后一个标签 */
        :last-of-type {
            background: #0000ff;
        }
        /* 选择指定每个 p 元素匹配的父元素中第 2 个子元素的背景色 */
        p:nth-child(2) {
            background: #00000f;
        }
        /* 选择p标签的父元素地下的全部偶数标签 */
        p:nth-child(odd) {
            background: #0000ff;
        }
        /* 选择p标签的父元素地下的全部基数标签 */
        p:nth-child(even) {
            background: #ff0000;
        }

        /* 以下用法经常是1-0的用法 */
        /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。 */
        p:nth-child(3n+1) {
            background: #ff0000;
        }
        P:nth-child(3n+2) {
            background: #ffff00;
        }
        p:nth-child(3n+0) {
            background: #000000;
        }

        /* 动态伪类选择器 */
        /* 选择input标签被选中时的状态 */
        input:focus {
            background: #ff0000;
        }
        /* 选择当有鼠标悬停在链接上时的状态 */
        a:hover {
            background: #ff0000;
        }
        /* 选择未访问的链接时的状态 */
        a:link {
            text-decoration: none;
            color: #000000;
        }
        /* 选择已访问的链接后的状态 */
        a:visited {
            color: #ff0000;
        }
    </style>
</head>
<body>
    <!-- 伪类选择器:减少类选择器的使用 -->
    <div id="theD">
        <p>伪类选择器</p>
        <p>伪类选择器</p>
        <p>伪类选择器</p>
        <p>伪类选择器</p>
    </div>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <form action="#">
        <input type="text"><br />
        <input type="text"><br />
        <input type="text"><br />
    </form>
    <a href="http://www.baidu.com">001</a><br />
    <a href="http://www.baidu.com">002</a><br />
    <a href="http://www.baidu.com">003</a><br />
</body>
</html>